<template>
    <div class="add_box">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" size="default" status-icon>
            <el-form-item label="优惠券类型：">
                <el-select v-model="ruleForm.type">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="优惠卷名称：" prop="name">
                <el-input v-model="ruleForm.name" />
            </el-form-item>

            <el-form-item label="适用平台：">
                <el-select v-model="ruleForm.platform">
                    <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>


            <el-form-item label="总发行量：" prop="publishCount">
                <el-input v-model="ruleForm.publishCount" placeholder="只能输入正整数" />
            </el-form-item>
            <el-form-item label="面额：" prop="amount">
                <el-input v-model="ruleForm.amount" placeholder="面值只能是数值，限2位小数">
                    <template #append>元</template>
                </el-input>
            </el-form-item>
            <el-form-item label="每人限领：" prop="perLimit">
                <el-input v-model="ruleForm.perLimit">
                    <template #append>张</template>
                </el-input>
            </el-form-item>
            <el-form-item label="使用门槛：" prop="minPoint">
                <el-input v-model="ruleForm.minPoint">
                    <template #prepend>满</template>
                    <template #append>元可用</template>
                </el-input>
            </el-form-item>
            <el-form-item label="领取日期：" prop="enableTime">
                <el-config-provider :locale="zhCn">
                    <el-date-picker v-model="ruleForm.enableTime" type="date" placeholder="选择日期" />
                </el-config-provider>
            </el-form-item>

            <el-form-item label="有效期：" prop="Time">
                <div class="flex">
                    <el-date-picker v-model="ruleForm.startTime" type="date" placeholder="选择日期" />
                    <span>至</span>
                    <el-date-picker v-model="ruleForm.endTime" type="date" placeholder="选择日期" />
                </div>
            </el-form-item>

            <el-form-item label="可使用商品：">
                <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
                    <el-tab-pane label="全场通用" name="first"></el-tab-pane>
                    <el-tab-pane label="指定分类" name="second">
                        <template #default>
                            <el-select v-model="value" class="m-2" placeholder="Select" size="large">
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                            <el-button>添加</el-button>
                            <el-table border>
                                <el-table-column prop="date" label="商品名称" width="240" />
                                <el-table-column prop="name1" label="操作" width="180" />
                            </el-table>
                        </template>
                    </el-tab-pane>
                    <el-tab-pane label="指定商品" name="third">
                        <template #default>
                            <div class="flex">
                                <el-input placeholder="商品名称/商品货号"></el-input>
                                <el-button>添加</el-button>
                            </div>
                            <el-table border>
                                <el-table-column label="商品名称" width="180" />
                                <el-table-column label="货号" width="180" />
                                <el-table-column label="操作" width="180" />
                            </el-table>
                        </template>
                    </el-tab-pane>
                </el-tabs>
            </el-form-item>
            <el-form-item label="备注：" prop="note">
                <el-input type="textarea" v-model="ruleForm.note"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitFn(ruleFormRef)">提交</el-button>
                <el-button @click="resetForm">重置</el-button>
            </el-form-item>
        </el-form>
    </div>

</template>

<script lang='ts' setup>
import { ElMessage, FormInstance, FormRules } from 'element-plus';
import { reactive, ref } from 'vue'
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import type { TabsPaneContext } from 'element-plus'
import { user } from "@/api"
import { useRouter } from "vue-router"

const router = useRouter()

const value = ref('')
const options = [
    {
        value: 0,
        label: '全场赠券',
    },
    {
        value: 1,
        label: '会员赠券',
    },
    {
        value: 2,
        label: '购物赠券',
    },
    {
        value: 3,
        label: '注册赠券',
    }
]

const options2 = [
    {
        value: 0,
        label: '全平台',
    },
    {
        value: 1,
        label: '移动平台',
    },
    {
        value: 2,
        label: 'PC平台',
    }
]


const ruleFormRef = ref<FormInstance>()

const ruleForm = reactive<ICouponList>({
    amount: "", //面额
    code: '',   //优惠码
    count: 0,  //数量
    enableTime: '',  //领取时间
    endTime: '',    //结束时间
    id: "",
    memberLevel: '', //总发行量
    perLimit: 1, //限领
    minPoint: '', //使用门槛
    name: "",   //优惠券名称
    note: "",   //备注
    platform: 0,  //适用平台 "全平台"

    productCategoryRelationList: [],
    productRelationList: [],
    publishCount: "",   //发行数量
    receiveCount: 0,  //领取数量
    startTime: "",   //开始的时间
    type: 0, //优惠券类型  "全场赠券"
    useCount: 0,  //已使用的数量
    useType: 0,   //使用类型
})

// 发送添加的请求
const submitFn = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid) => {
        if (valid) {
            user.couponCreateApi(ruleForm).then(res => {
                ElMessage.success(res.message)
            })
            router.push("/sms/coupon")
        } else {
            ElMessage.error("校验失败")
        }
    })
}

// 重置
const resetForm = () => {
    ruleFormRef.value?.resetFields()
}

// 校验规则
const rules = reactive({
    name: [{ required: true, message: "请输入优惠券名称", trigger: 'blur' }], //优惠券名称
    publishCount: [{ required: true, message: "只能输入正整数", trigger: 'blur' }],  //总发行量
    amount: [{ required: true, message: "面值只能是数值，0.01-10000，限2位小数", trigger: 'blur' }],  //面额
    minPoint: [{ required: true, message: "只能输入正整数", trigger: 'blur' }],  //使用门槛
    enableTime: [], //领取日期
    Time: [],
    note: [],
    perLimit: [],
})

// 待开发功能
const activeName = ref('first')  //'second'
const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}

</script>
<style lang='less' scoped>
.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

.add_box {
    padding: 100px;
    margin: 100px 300px;
    border: 1px solid #ccc;
}

.flex {
    display: flex;

    :deep(.el-col-22) {
        width: 90px;
    }

    span {
        display: inline-block;
        margin: 0 20px;
        color: #000;
    }
}

:deep(.el-button) {
    height: 40px;
}
</style>